<template>
<div v-show="disPlayFlag">
    <el-tree ref='tree' :data="treeData" :props="defaultProps" :expand-on-click-node='false' node-key="id" :highlight-current='true' :default-expand-all="true"></el-tree>
</div>
</template>

<script>
import {
  selectMenuTree
} from '@/api/systemManage/tabPaneJobAuthority'

export default {
  props: {
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    groupId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
    disPlayFlag: {
      handler: function(val, oldVal) {
        if (this.disPlayFlag) {
          this.initData()
        } else {
          this.treeData = []
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.initData()
  },
  created() {

  },
  methods: {
    initData() {
      if (this.groupId) {
        selectMenuTree(this.groupId).then(response => {
          this.treeData = response.data.data
        })
      }
    }
  }
}
</script>
